<template>
  <el-card class="card" @click="openDialog">
    {{ card.value }}
  </el-card>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue'
import { useStore } from 'vuex'
import CardDialog from './CardDialog.vue'

interface Card {
  id: number
  value: number
}

export default defineComponent({
  name: 'Card',
  components: { CardDialog },
  props: {
    card: {
      type: Object as PropType<Card>,
      required: true,
    },
  },
  emits: ['open-dialog'],
  setup(props, { emit }) {
    const store = useStore()

    const openDialog = () => {
      emit('open-dialog', props.card.id)
    }

    return {
      openDialog,
    }
  },
})
</script>

<style scoped>
.card {
  cursor: pointer;
  text-align: center;
  padding: 20px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.05);
  }
}
</style>
